[#include "/mall/common/default.html" /]
<div class="content">
    <!-- 主体内容 -->
    <div class="weui_tab_bd">
        <!-- 搜索框  -->
        [#include "/mall/common/head.html"/]
        <!-- /搜索框  -->
        <!-- 分类 -->
        <div id="classify-container" class="weui-row weui-no-gutter">
            <div class="weui-col-20 swiper-container">
                <ul class="swiper-wrapper classify">
                    <!-- <li class="active swiper-slide"><a href="javascript:void(0)" target="classify-win">时令果蔬</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">海鲜干货</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">日用品</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">榨汁机</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">工艺品</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">电烤盘</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">特色商品</a></li>
                    <li class="swiper-slide"><a href="javascript:void(0)" target="classify-win">酒水饮品</a></li> -->

                    <%for(list in productCategoryTreeList){%>
                    <li class="swiper-slide" id="${list.id}"><a href="javascript:void(0)" target="classify-win">${list.name}</a>
                    </li>
                    <%}%>
                </ul>
            </div>
            <div class="weui-col-80 child-window">
                <div class="content">
                    <img class="cover" src="${ctxPath}/resources/weixin/images/ding.jpg" height="120px" alt="封面"/>
                    <h3>&nbsp;&nbsp;&nbsp;&nbsp;热门分类</h3>
                    <div id="list" class="weui_grids classify-info">
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="button">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                手机
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="cell">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                笔记本
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="toast">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                坚果炒货
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="button">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                手机
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="cell">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                笔记本
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="toast">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                坚果炒货
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="button">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                手机
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="cell">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                笔记本
                            </p>
                        </a>
                        <a href="${ctxPath}/weixin/product/productList" class="weui_grid js_grid" data-id="toast">
                            <div class="weui_grid_icon">
                                <img src="${ctxPath}/resources/weixin/images/swiper-2.jpg" alt="">
                            </div>
                            <p class="weui_grid_label">
                                坚果炒货
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /分类 -->
    </div>
    <!-- /主体内容 -->

    <!-- 底部导航 -->
    [#include "/mall/common/navigator.html"/]
    <!-- /底部导航 -->
</div>
<!--手机端script需要加载后方-->
[#include "/mall/common/script.html"/]
<script type="text/javascript">
    Template.init("#nav-page-categ");
</script>
<script type="text/javascript">
    $(function () {
        var parentId = '${defaultParentId}';
        var initY, moveY, top;
        var fps = $("#fps");
        //分类点击事件
        $("#classify-container ul li").click(function () {
            $(this).parent().find("li").removeClass("active");
            $(this).addClass("active");
            parentId = $(this).attr("id");
            loadData(parentId);
        });

        //商城计算高度
        function initClassifyHeight() {
            var bodyH = window.innerHeight;
            var headerH = $("#search_bar").innerHeight();
            var footer = $(".weui_tabbar").innerHeight();
            $("#classify-container").height(bodyH - headerH - footer);
        };
        $(window).load(function () {
            initClassifyHeight();
            $("#classify-container > .swiper-container").height($("#classify-container").height());
            $("#classify-container > .child-window").height($("#classify-container").height());
            Swiper('.swiper-container', {
                slidesPerView: 'auto',
                paginationClickable: true,
                freeModeSticky: true,
                direction: 'vertical'
            });

            loadData(parentId);
        });

        function loadData(parentId) {
            $.post("${ctxPath}/weixin/category/getChildrenCateg", {parentId: parentId}, function (resp) {
                if (resp.code != 200) {
                    $.toast("加载商品数据失败", "cancel");
                    return;
                }
                $("#list").empty();
                var data = resp.data;
                if (data.length <= 0) {
                    $("#list").html("没有子分类数据");
                    return;
                }

                for (var i = 0; i < data.length; i++) {
                    var content = data[i];
                    var contentDiv = formatTemplate(content, $("#list_item").html());
                    $("#list").append(contentDiv);
                }
            });
        }

        $(window).resize(function () {
            initClassifyHeight();
        });
    });
</script>
<script id="list_item" type="text/html">
    <a href="${ctxPath}/weixin/product/productList?categId={id}" class="weui_grid js_grid" data-id="button">
        <div class="weui_grid_icon">
            <img src="${imgPath}/{categ_img}" alt="">
        </div>
        <p class="weui_grid_label">
            {name}
        </p>
    </a>
</script>
